<template>
  <div class="info-content">
    <NavTitle title="流水线通知">
      <template #extra>
        <div class="trigger-rule-info">
          <a-switch
            v-model:checked="formData.isRunNotify"
            checked-children="开"
            un-checked-children="关"
            :checkedValue="1"
            :unCheckedValue="0"
            :disabled="isView"
          />
        </div>
      </template>
    </NavTitle>
    <div class="trigger-rule-content">
      <div class="trigger-rule-list">
        <div class="trigger-rule-item">
          <div class="trigger-rule-desc-left">通知方式：</div>
          <div class="trigger-rule-desc-right">
            <a-checkbox-group v-model:value="formData.notifyWay" :options="plainOptions" :disabled="isView" />
          </div>
        </div>
        <div class="trigger-rule-item">
          <div class="trigger-rule-desc-left">通知事件：</div>
          <div class="trigger-rule-desc-right">
            <a-select
              v-model:value="formData.notifyEvent"
              :options="notificationEventList"
              style="width: 396px"
              placeholder="请选择通知事件"
              allowClear
              :disabled="isView"
            >
              <template #suffixIcon>
                <CaretDownOutlined style="color: #6b84a5" />
              </template>
            </a-select>
          </div>
        </div>
        <div class="trigger-rule-item">
          <div class="trigger-rule-desc-left">通知人：</div>
          <div class="trigger-rule-desc-right">
            <div>
              <a-radio-group
                :disabled="isView"
                v-model:value="formData.notifyReceiverType"
                :options="notifyPersonTypeOptions"
                style="width: 396px"
                @change="handleNotifyPersonTypeChange"
              />
            </div>
            <div class="person-select">
              <RichSelect
                v-model:value="formData.notifyReceiverList as any"
                :options="personList"
                style="width: 396px"
                placeholder="请选择"
                allowClear
                :disabled="isView"
                :multiple="true"
              >
                <template #suffixIcon>
                  <CaretDownOutlined style="color: #6b84a5" />
                </template>
              </RichSelect>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { CaretDownOutlined } from '@ant-design/icons-vue';
import { usePipelineStore } from '@/store/modules/pipeline';
import { storeToRefs } from 'pinia';
import { cloneDeep } from 'lodash';
import { PipelineOperationTypeCode, NotificationEvent, NotifyReceiverType, NotifyWay } from '@/enums/pipelineEnum';
import RichSelect from '@/components/SchemaForm/src/components/RichSelect.vue';
import { rolesMap } from '@/settings/commonSettings';
import { queryPermission, PermissionData } from '@/api/userAndAuth';
const route = useRoute();
const counterStore = usePipelineStore();
const { triggerSetting, baseInfo } = storeToRefs(counterStore);
const { setTriggerSettingsData } = counterStore;
const dataObject = ref<any>(cloneDeep(triggerSetting));
const getPipeLineData = computed(() => {
  return dataObject.value;
});
const isView = computed(() => route.params.type == PipelineOperationTypeCode.info);

const notificationEventList = [{ label: '仅失败', value: NotificationEvent.failed }];
const notifyPersonTypeOptions = [
  { label: '角色', value: NotifyReceiverType.role },
  { label: '人员', value: NotifyReceiverType.person },
];
const roleOptions = Object.entries(rolesMap).map(([key, value]) => ({ value: key, label: value }));
const personList = ref<any>([]);
const notifyPersonOptions = ref<any>([]);
const plainOptions = [{ label: '站内信', value: NotifyWay.mail }];
const formData = reactive({
  isRunNotify: 0,
  notifyWay: [],
  notifyEvent: NotificationEvent.failed,
  notifyReceiverType: NotifyReceiverType.role,
  notifyReceiverList: null,
});

onMounted(async () => {
  // 查询当前流水线的所有管理人员和开发人员
  const data = await queryPermission({ objectId: baseInfo.value.componentCode });
  notifyPersonOptions.value = data?.map((item: PermissionData) => ({
    value: item.targetUser,
    label: JSON.parse((item.userAttribute as string) || '{}')?.userName,
  }));
  personList.value = formData.notifyReceiverType == NotifyReceiverType.person ? notifyPersonOptions.value : roleOptions;
});

watch(
  getPipeLineData,
  (newVal) => {
    if (Object.keys(newVal).length > 0) {
      dataObject.value = cloneDeep(newVal);
      formData.isRunNotify = dataObject.value.isRunNotify;
      formData.notifyWay = dataObject.value.notifyWay?.split(',') || dataObject.value.notifyWay;
      formData.notifyEvent = dataObject.value.notifyEvent;
      formData.notifyReceiverType = dataObject.value.notifyReceiverType;
      formData.notifyReceiverList = dataObject.value.notifyReceiverList;
    }
  },
  {
    immediate: true,
  },
);

watch(formData, (newVal) => {
  if (newVal) {
    personList.value =
      formData.notifyReceiverType == NotifyReceiverType.person ? notifyPersonOptions.value : roleOptions;
    setTriggerSettingsData({ ...dataObject.value, ...newVal, notifyWay: newVal.notifyWay?.join(',') });
  }
});
const handleNotifyPersonTypeChange = () => {
  formData.notifyReceiverList = null;
};
</script>

<style scoped lang="less">
.info-content {
  width: 100%;

  .trigger-rule-info {
    position: absolute;
    left: 130px;
    top: 50%;
    transform: translate(0, -16px);
  }

  .trigger-rule-content {
    width: 100%;
    margin-bottom: 48px;
    .trigger-rule-list {
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      .trigger-rule-item {
        margin-bottom: 20px;
        color: #000;
        display: flex;
        .trigger-rule-desc-left {
          font-size: 14px;
          width: 80px;
          text-align: right;
          display: inline-block;
        }
        .trigger-rule-desc-right {
          margin-left: 8px;
        }
      }
    }
  }

  .person-select {
    margin-top: 20px;
  }
}
</style>
